<template>
  <div id="content-blog-item">
    <div class="select-time">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select size="mini" v-model="params.year" placeholder="年" @change="handleYear">
            <el-option v-for="item in yearOptions" :key="item.label" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select size="mini" v-model="params.month" placeholder="月">
            <el-option v-for="item in monthOptions" :key="item.label" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select size="mini" v-model="params.type" placeholder="文章专栏">
            <el-option v-for="item in columnOptions" :key="item.name" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-input
            size="mini"
            v-model="params.value"
            @keyup.enter.native="search"
            placeholder="请输入关键词"
          ></el-input>
        </el-col>
        <el-col :span="3">
          <el-button size="mini" @click="search" :loading="loading">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="blog-list" ref="blog-list">
      <BlogItem :list="blogList" deleteOption editOption @refresh="refresh" />
      <LoadingMore
        :loadingStatus="loadingStatus"
        :pageSize="pageSize"
        :toLoadHeight="toLoadHeight"
        :ajaxFun="loadingMore"
        :scrollDom="scrollDom"
      />
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getData()
    this.getOption()
  },
  mounted() {
    this.scrollDom = this.$refs['blog-list']
  },
  data() {
    return {
      loading: false,
      yearOptions: [],
      monthOptions: [],
      columnOptions: [],
      blogList: [],
      loadingStatus: 1,
      // 总页数
      pageSize: 4,
      toLoadHeight: 773,
      scrollDom: '',
      params: {
        page: 1,
        limit: 10,
        year: '',
        month: '',
        type: '',
        value: ''
      }
    }
  },
  methods: {
    handleYear() {
      if (this.params.year === '不限') {
        return
      }
      this.getMonth(this.params.year)
    },

    loadingMore(curPage) {
      if (this.loadingStatus === 3) {
        return
      }
      this.loadingStatus = 2

      this.loadingStatus = this.pageSize > curPage ? 1 : 3
      this.params.page++
      this.getData()
    },
    search() {
      let params = {
        page: 1,
        limit: 10
      }
      // 会改变原对象
      Object.assign(this.params, params)
      this.getData('search')
    },
    refresh() {
      Object.assign(this.$data, this.$options.data.call(this))
      this.getData()
    },
    getMonth(year) {
      this.$ajax({
        url: this.$ajax.setUrl('/article/month'),
        method: 'get',
        params: this.$ajax.setParams({ year })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          let monthOptions = data.data.monthOptions
          monthOptions = [{ value: '不限', label: '不限' }, ...monthOptions]
          this.monthOptions = monthOptions
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getData(type) {
      // 这个是搜索按钮
      this.loading = true
      this.$emit('isLoading', true)
      this.$ajax({
        url: this.$ajax.setUrl('/article/search'),
        method: 'get',
        params: this.$ajax.setParams(this.getParams())
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (type == 'search') {
            const list = data.data.list.map((item) => {
              item.title = this.$utils.heightLightTxt(this.params.value, item.title)
              item.description = this.$utils.heightLightTxt(this.params.value, item.description)
              return item
            })
            this.blogList = list
          } else {
            this.blogList.push(...data.data.list)
          }
          if (data.data.total <= this.params.limit) {
            this.loadingStatus = 3
          }
          this.pageSize = Math.ceil(data.data.total / this.params.limit)
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
        this.$emit('isLoading', false)
      })
    },
    getOption() {
      this.$ajax({
        url: this.$ajax.setUrl('/article/option'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          let { yearOptions, columnOptions } = data.data
          yearOptions = [{ value: '不限', label: '不限' }, ...yearOptions]
          columnOptions = [{ name: '不限', id: '不限' }, ...columnOptions]
          this.yearOptions = yearOptions
          this.monthOptions = [{ value: '不限', label: '不限' }]
          this.columnOptions = columnOptions
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getParams() {
      let params = {}
      if (this.params.year == '不限') {
        params.year = ''
      }
      if (this.params.month == '不限') {
        params.month = ''
      }
      if (this.params.type == '不限') {
        params.type = ''
      }
      return Object.assign({}, this.params, params)
    }
  }
}
</script>

<style lang="scss"></style>
